<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Loading...</title>
		<link rel="stylesheet" href="styles/bootstrap.css">
		<link rel="stylesheet" href="styles/swiper.min.css">
		<link rel="stylesheet" href="styles/blog.css">
		<link rel="stylesheet" href="styles/public.css">
		<style></style>
	</head>
	<body>
	<nav class="navbar navbar-default">
		<div class="container">
			<div class="navbar-header">
			<button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#navigation'>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
				<a href="" class='navbar-brand'>
					<img src="images/logo2.png" alt="">
					<h3>Super Nancy</h3>
				</a>
			</div>
			<div class='collapse navbar-collapse' id='navigation'>
				<ul class='nav navbar-nav navbar-right'>
					<li><a href="index.html">Home</a></li>
					<li class='active'><a href="">Exhibition</a></li>
					<li><a href="">Contact</a></li>
				</ul>
			</div>
		</div>
	</nav>
	<section class="preview"></section>
	<section class="content">
		<div class="container" id='content-wrapper'>

			<div class='loading'>
				<div class="loading-body">
					<span class='cub1'></span>
					<span class='cub2'></span>
				</div>
				<h2>Loading...</h2>
			</div>

		</div>
	</section>
	<footer>
		<div class="container">
			<p>&copy;Copyright 2016-2017 Nancy.com</p>
			<a href="">
				<div class="qrcode">
					<img src="images/qrcode.png" alt="qrcode">
				</div>
			</a>
		</div>
	</footer>
	<script id='content' type='text/html'>
			<h1>{{art_title}}</h3>
			<p>{{art_content}}</p>
			<img src="images/{{art_img}}" alt="blog-img">
	</script>
	<script src='scripts/jquery.js'></script>
	<script src='scripts/bootstrap.js'></script>
	<script src='scripts/template.js'></script><!--ajax 模板引擎-->
	<script>
		$(document).ready(function(){
			//var availHeight=screen.availHeight;
			//$('.loading').css({
			//	height:availHeight-275
			//})
			var queryA=getQueryString('a');
			if(!queryA){
				location.href='error.html';
			}
			$.get('http://plrabbit.com/home/api.php',{
				m:'article',
				a:getQueryString('a')
			}).done(function(data){
				console.log(data);
				data=data[0];
				document.title=data.art_title;//修改标题  原生
				//$('title').text(data.art_title);//jQ  存在兼容性的问题
				var content=template('content',data);
				$('.loading').hide(1000);
				$('#content-wrapper').html(content);
				$('.preview').css({
					backgroundImage:"url('images/" + data.art_img + " ')"
				})
			});
				//console.log(window.location.search.substr(1));
				function getQueryString(name){
					var reg=new RegExp('(^|&)'+ name + '=([^&]*)(&|$)','i');
					//reg=/(^|&)a=([^&]*)(&|$)/i;
					var r=location.search.substr(1).match(reg);//百度搜索返回包括？的搜索参数
					if(r!=null) return r[2];
					return null;
				}
		});
		
	</script>
	</body>
</html>